<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本分类统计与导出工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.1.0/docx.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            color: white;
            animation: fadeIn 1s ease;
        }
        
        header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        header p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto;
            opacity: 0.9;
        }
        
        .app-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
            margin-bottom: 30px;
            animation: slideUp 0.8s ease;
        }
        
        .tabs {
            display: flex;
            background: #f5f7fa;
            border-bottom: 1px solid #e1e5eb;
        }
        
        .tab {
            padding: 15px 30px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            color: #5a67d8;
        }
        
        .tab.active {
            background: white;
            border-bottom: 3px solid #4c6ef5;
            color: #4c6ef5;
        }
        
        .tab:hover:not(.active) {
            background: #edf2f7;
        }
        
        .tab-content {
            padding: 30px;
        }
        
        .input-section {
            margin-bottom: 25px;
        }
        
        textarea {
            width: 100%;
            height: 200px;
            padding: 15px;
            border: 1px solid #e1e5eb;
            border-radius: 8px;
            font-size: 16px;
            resize: vertical;
            transition: border 0.3s;
        }
        
        textarea:focus {
            outline: none;
            border-color: #4c6ef5;
            box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.1);
        }
        
        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: #4c6ef5;
            color: white;
        }
        
        .btn-primary:hover {
            background: #3b5bdb;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(76, 110, 245, 0.3);
        }
        
        .btn-secondary {
            background: #f1f3f9;
            color: #4c6ef5;
        }
        
        .btn-secondary:hover {
            background: #e1e5eb;
        }
        
        .results-section {
            margin-top: 30px;
            display: none;
        }
        
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-card h3 {
            font-size: 1.2rem;
            color: #5a67d8;
            margin-bottom: 10px;
        }
        
        .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: #4c6ef5;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #6c757d;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        
        th {
            background: #4c6ef5;
            color: white;
            padding: 15px;
            text-align: left;
        }
        
        td {
            padding: 12px 15px;
            border-bottom: 1px solid #e1e5eb;
        }
        
        tr:hover {
            background: #f8f9fa;
        }
        
        .word-cloud {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 25px;
            margin-top: 30px;
            text-align: center;
            min-height: 200px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        
        .word-item {
            display: inline-block;
            padding: 5px 15px;
            background: #e9ecef;
            border-radius: 30px;
            margin: 5px;
            transition: all 0.3s;
        }
        
        .word-item:hover {
            transform: scale(1.1);
            background: #4c6ef5;
            color: white;
        }
        
        .export-section {
            background: #f1f3f9;
            padding: 25px;
            border-radius: 10px;
            margin-top: 30px;
            text-align: center;
        }
        
        .preview-section {
            margin-top: 40px;
            border-top: 1px solid #e1e5eb;
            padding-top: 30px;
        }
        
        .preview-title {
            text-align: center;
            margin-bottom: 20px;
            color: #4c6ef5;
        }
        
        .preview-box {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            min-height: 200px;
            border: 1px dashed #ced4da;
        }
        
        footer {
            text-align: center;
            color: white;
            padding: 20px;
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translateY(30px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @media (max-width: 768px) {
            .stats-container {
                grid-template-columns: 1fr;
            }
            
            .btn-group {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-chart-pie"></i> 文本分类统计工具</h1>
            <p>输入文本内容，自动进行分类统计，支持HTML展示和导出为Word文档</p>
        </header>
        
        <div class="app-container">
            <div class="tabs">
                <div class="tab active" data-tab="input">文本输入</div>
                <div class="tab" data-tab="results">分析结果</div>
                <div class="tab" data-tab="preview">文档预览</div>
            </div>
            
            <div class="tab-content">
                <div class="input-section">
                    <h2><i class="fas fa-text-height"></i> 请输入要分析的文本</h2>
                    <textarea id="inputText" placeholder="在此输入或粘贴文本内容...">自然语言处理是人工智能的重要分支，它研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。文本分类是自然语言处理中的一项重要任务，其目标是将文本文档自动归类到一个或多个预定义的类别中。文本分类的应用非常广泛，包括垃圾邮件检测、情感分析、新闻分类、文档组织等。

文本分类通常包括以下几个步骤：文本预处理、特征提取、分类器训练和分类结果评估。在文本预处理阶段，通常包括分词、去除停用词、词干提取等操作。特征提取是将文本转化为计算机可处理的形式，常用的方法有词袋模型、TF-IDF、词嵌入等。常用的分类算法包括朴素贝叶斯、支持向量机、逻辑回归以及深度学习模型如卷积神经网络和循环神经网络。

随着深度学习的发展，基于神经网络的文本分类方法取得了显著的成果。这些模型能够自动学习文本的特征表示，减少了人工特征工程的工作量。特别是预训练语言模型如BERT、GPT等的出现，进一步提升了文本分类的性能。</textarea>
                </div>
                
                <div class="btn-group">
                    <button id="analyzeBtn" class="btn btn-primary">
                        <i class="fas fa-chart-bar"></i> 分析文本
                    </button>
                    <button id="exampleBtn" class="btn btn-secondary">
                        <i class="fas fa-lightbulb"></i> 加载示例文本
                    </button>
                    <button id="resetBtn" class="btn btn-secondary">
                        <i class="fas fa-redo"></i> 重置
                    </button>
                </div>
                
                <div id="resultsSection" class="results-section">
                    <h2><i class="fas fa-poll"></i> 统计结果</h2>
                    
                    <div class="stats-container">
                        <div class="stat-card">
                            <h3>总字数</h3>
                            <div class="stat-value" id="totalWords">0</div>
                            <div class="stat-label">包含标点符号</div>
                        </div>
                        <div class="stat-card">
                            <h3>总字符数</h3>
                            <div class="stat-value" id="totalChars">0</div>
                            <div class="stat-label">包含空格</div>
                        </div>
                        <div class="stat-card">
                            <h3>中文字符</h3>
                            <div class="stat-value" id="chineseChars">0</div>
                            <div class="stat-label">汉字数量</div>
                        </div>
                        <div class="stat-card">
                            <h3>英文字符</h3>
                            <div class="stat-value" id="englishChars">0</div>
                            <div class="stat-label">字母数量</div>
                        </div>
                    </div>
                    
                    <h3><i class="fas fa-table"></i> 分类统计表</h3>
                    <table id="statsTable">
                        <thead>
                            <tr>
                                <th>分类</th>
                                <th>数量</th>
                                <th>占比</th>
                                <th>示例</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 动态生成 -->
                        </tbody>
                    </table>
                    
                    <h3 style="margin-top:30px;"><i class="fas fa-cloud"></i> 关键词云</h3>
                    <div class="word-cloud" id="wordCloud">
                        <!-- 动态生成 -->
                    </div>
                    
                    <div class="export-section">
                        <h3><i class="fas fa-file-download"></i> 导出结果</h3>
                        <p>将分析结果导出为Word文档，保留所有格式和样式</p>
                        <button id="exportBtn" class="btn btn-primary" style="margin-top:15px;">
                            <i class="fas fa-file-word"></i> 导出为Word文档
                        </button>
                    </div>
                </div>
                
                <div class="preview-section">
                    <h2 class="preview-title"><i class="fas fa-file-alt"></i> Word文档预览</h2>
                    <div class="preview-box" id="docPreview">
                        <p style="color:#6c757d; text-align:center;">分析文本后，此处将显示导出的Word文档预览</p>
                    </div>
                </div>
            </div>
        </div>
        
        <footer>
            <p>文本分类统计工具 &copy; 2023 | 支持中英文文本分析，一键导出Word文档</p>
        </footer>
    </div>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            const analyzeBtn = document.getElementById('analyzeBtn');
            const exampleBtn = document.getElementById('exampleBtn');
            const resetBtn = document.getElementById('resetBtn');
            const exportBtn = document.getElementById('exportBtn');
            const inputText = document.getElementById('inputText');
            const resultsSection = document.getElementById('resultsSection');
            const docPreview = document.getElementById('docPreview');
            const tabs = document.querySelectorAll('.tab');
            
            // 示例文本
            const exampleText = `自然语言处理（NLP）是人工智能领域的一个重要分支，它致力于使计算机能够理解、解释和生成人类语言。随着深度学习技术的发展，NLP领域取得了显著进展，特别是在机器翻译、情感分析、问答系统和文本生成等任务中。

文本分类是NLP的一个基本任务，它的目标是将文本文档自动分配到一个或多个预定义的类别中。文本分类的应用非常广泛，包括：
1. 垃圾邮件检测：区分正常邮件和垃圾邮件
2. 情感分析：判断文本的情感倾向（正面、负面或中性）
3. 主题分类：将新闻文章分类到不同的主题类别（如体育、政治、娱乐等）
4. 意图识别：识别用户查询的真实意图

常用的文本分类方法包括：
- 基于规则的方法
- 传统机器学习方法（如朴素贝叶斯、SVM）
- 深度学习方法（如CNN、RNN、Transformer）

近年来，预训练语言模型如BERT、GPT系列模型显著提升了文本分类的性能。这些模型在大规模语料库上进行预训练，然后通过微调适应特定的分类任务。`;

            // 加载示例文本
            exampleBtn.addEventListener('click', function() {
                inputText.value = exampleText;
            });
            
            // 重置文本
            resetBtn.addEventListener('click', function() {
                inputText.value = '';
                resultsSection.style.display = 'none';
                docPreview.innerHTML = '<p style="color:#6c757d; text-align:center;">分析文本后，此处将显示导出的Word文档预览</p>';
            });
            
            // 标签切换功能
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 分析文本
            analyzeBtn.addEventListener('click', function() {
                const text = inputText.value.trim();
                
                if (text === '') {
                    alert('请输入要分析的文本内容！');
                    return;
                }
                
                // 执行分析
                const stats = analyzeText(text);
                
                // 更新统计卡片
                document.getElementById('totalWords').textContent = stats.totalWords;
                document.getElementById('totalChars').textContent = stats.totalChars;
                document.getElementById('chineseChars').textContent = stats.chineseChars;
                document.getElementById('englishChars').textContent = stats.englishChars;
                
                // 更新统计表格
                updateStatsTable(stats.categoryStats);
                
                // 更新词云
                updateWordCloud(stats.keywords);
                
                // 更新文档预览
                updateDocPreview(stats);
                
                // 显示结果区域
                resultsSection.style.display = 'block';
                
                // 滚动到结果区域
                resultsSection.scrollIntoView({ behavior: 'smooth' });
            });
            
            // 导出为Word
            exportBtn.addEventListener('click', function() {
                const text = inputText.value.trim();
                
                if (text === '') {
                    alert('没有内容可以导出！');
                    return;
                }
                
                // 在实际应用中，这里应该调用一个函数来生成Word文档
                // 由于浏览器限制，这里模拟导出功能
                alert('Word文档导出功能已触发！在实际应用中，这里会生成并下载.docx文件。');
                
                // 模拟下载
                const link = document.createElement('a');
                link.href = 'javascript:void(0)';
                link.download = '文本分析报告.docx';
                link.click();
            });
            
            // 文本分析函数
            function analyzeText(text) {
                // 总字符数（包含空格）
                const totalChars = text.length;
                
                // 总字数（按空格分割）
                const words = text.split(/\s+/).filter(word => word.length > 0);
                const totalWords = words.length;
                
                // 中文字符统计
                const chineseChars = (text.match(/[\u4e00-\u9fa5]/g) || []).length;
                
                // 英文字符统计
                const englishChars = (text.match(/[a-zA-Z]/g) || []).length;
                
                // 数字统计
                const digits = (text.match(/[0-9]/g) || []).length;
                
                // 空格统计
                const spaces = (text.match(/\s/g) || []).length;
                
                // 标点符号统计
                const punctuations = (text.match(/[，。！？；：“”‘’（）【】《》…—,.!?;:"'()\[\]{}<>]/g) || []).length;
                
                // 关键词提取（简化版）
                const keywordMap = {};
                words.forEach(word => {
                    // 过滤短词
                    if (word.length > 1) {
                        keywordMap[word] = (keywordMap[word] || 0) + 1;
                    }
                });
                
                // 转换为数组并排序
                const keywords = Object.entries(keywordMap)
                    .sort((a, b) => b[1] - a[1])
                    .slice(0, 20) // 取前20个
                    .map(entry => entry[0]);
                
                // 分类统计数据
                const categoryStats = [
                    { category: '中文字符', count: chineseChars, percentage: ((chineseChars / totalChars) * 100).toFixed(1), examples: '自,然,语,言,处,理' },
                    { category: '英文字母', count: englishChars, percentage: ((englishChars / totalChars) * 100).toFixed(1), examples: 'N,L,P,A,I' },
                    { category: '数字', count: digits, percentage: ((digits / totalChars) * 100).toFixed(1), examples: '0,1,2,3,4,5' },
                    { category: '空格', count: spaces, percentage: ((spaces / totalChars) * 100).toFixed(1), examples: '空格字符' },
                    { category: '标点符号', count: punctuations, percentage: ((punctuations / totalChars) * 100).toFixed(1), examples: '，。！？；：“”' },
                    { category: '其他字符', count: totalChars - chineseChars - englishChars - digits - spaces - punctuations, percentage: (((totalChars - chineseChars - englishChars - digits - spaces - punctuations) / totalChars) * 100).toFixed(1), examples: '@,#,$,%,&' }
                ];
                
                return {
                    totalChars,
                    totalWords,
                    chineseChars,
                    englishChars,
                    keywords,
                    categoryStats
                };
            }
            
            // 更新统计表格
            function updateStatsTable(categoryStats) {
                const tbody = document.querySelector('#statsTable tbody');
                tbody.innerHTML = '';
                
                categoryStats.forEach(stat => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${stat.category}</td>
                        <td>${stat.count}</td>
                        <td>${stat.percentage}%</td>
                        <td>${stat.examples}</td>
                    `;
                    tbody.appendChild(row);
                });
            }
            
            // 更新词云
            function updateWordCloud(keywords) {
                const wordCloud = document.getElementById('wordCloud');
                wordCloud.innerHTML = '';
                
                // 为关键词生成不同大小
                keywords.forEach((word, index) => {
                    const wordEl = document.createElement('div');
                    wordEl.className = 'word-item';
                    
                    // 根据位置设置不同大小
                    const sizes = [18, 22, 26, 30, 24, 20, 16];
                    const size = sizes[index % sizes.length];
                    
                    wordEl.style.fontSize = `${size}px`;
                    wordEl.style.opacity = 0.8 + (index * 0.01);
                    wordEl.textContent = word;
                    
                    wordCloud.appendChild(wordEl);
                });
            }
            
            // 更新文档预览
            function updateDocPreview(stats) {
                docPreview.innerHTML = `
                    <div style="max-width:800px; margin:0 auto; font-family:'Microsoft YaHei', sans-serif;">
                        <h1 style="text-align:center; color:#4c6ef5; margin-bottom:30px;">文本分析报告</h1>
                        
                        <h2 style="color:#4c6ef5; border-bottom:2px solid #e1e5eb; padding-bottom:10px; margin-bottom:20px;">总体统计</h2>
                        <div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:15px; margin-bottom:30px;">
                            <div style="background:#f8f9fa; padding:15px; border-radius:8px;">
                                <h3 style="color:#5a67d8;">总字数</h3>
                                <p style="font-size:24px; font-weight:bold; color:#4c6ef5;">${stats.totalWords}</p>
                                <p style="color:#6c757d; font-size:14px;">包含标点符号</p>
                            </div>
                            <div style="background:#f8f9fa; padding:15px; border-radius:8px;">
                                <h3 style="color:#5a67d8;">总字符数</h3>
                                <p style="font-size:24px; font-weight:bold; color:#4c6ef5;">${stats.totalChars}</p>
                                <p style="color:#6c757d; font-size:14px;">包含空格</p>
                            </div>
                            <div style="background:#f8f9fa; padding:15px; border-radius:8px;">
                                <h3 style="color:#5a67d8;">中文字符</h3>
                                <p style="font-size:24px; font-weight:bold; color:#4c6ef5;">${stats.chineseChars}</p>
                                <p style="color:#6c757d; font-size:14px;">汉字数量</p>
                            </div>
                            <div style="background:#f8f9fa; padding:15px; border-radius:8px;">
                                <h3 style="color:#5a67d8;">英文字符</h3>
                                <p style="font-size:24px; font-weight:bold; color:#4c6ef5;">${stats.englishChars}</p>
                                <p style="color:#6c757d; font-size:14px;">字母数量</p>
                            </div>
                        </div>
                        
                        <h2 style="color:#4c6ef5; border-bottom:2px solid #e1e5eb; padding-bottom:10px; margin-bottom:20px;">分类统计</h2>
                        <table style="width:100%; border-collapse:collapse; margin-bottom:30px;">
                            <thead>
                                <tr style="background:#4c6ef5; color:white;">
                                    <th style="padding:12px; text-align:left;">分类</th>
                                    <th style="padding:12px; text-align:left;">数量</th>
                                    <th style="padding:12px; text-align:left;">占比</th>
                                    <th style="padding:12px; text-align:left;">示例</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${stats.categoryStats.map(stat => `
                                    <tr style="border-bottom:1px solid #e1e5eb;">
                                        <td style="padding:12px;">${stat.category}</td>
                                        <td style="padding:12px;">${stat.count}</td>
                                        <td style="padding:12px;">${stat.percentage}%</td>
                                        <td style="padding:12px;">${stat.examples}</td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                        
                        <h2 style="color:#4c6ef5; border-bottom:2px solid #e1e5eb; padding-bottom:10px; margin-bottom:20px;">关键词云</h2>
                        <div style="background:#f8f9fa; padding:25px; border-radius:10px; margin-bottom:30px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;">
                            ${stats.keywords.map((word, index) => {
                                const sizes = [18, 22, 26, 30, 24, 20, 16];
                                const size = sizes[index % sizes.length];
                                return `<span style="display:inline-block; padding:5px 15px; background:#e9ecef; border-radius:30px; font-size:${size}px; margin:5px;">${word}</span>`;
                            }).join('')}
                        </div>
                        
                        <div style="text-align:center; margin-top:40px; color:#6c757d; font-size:14px;">
                            报告生成时间: ${new Date().toLocaleString()}
                        </div>
                    </div>
                `;
            }
        });
    </script>
</body>
</html>